<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%><%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<tiles:insertDefinition name="layout">
	<tiles:putAttribute name="head">
		<style type="text/css">
#selColors option {
	padding: 0.2em;
	margin: 0.2em;
}

.courseType {
	padding: 0.4em;
}

.dialogForm {
	display: none;
}
</style>
		<script type="text/javascript">
			$(function() {
				$("#selColors").change(function() {
					if (!this.value) {
						$(this).removeClass();
					} else {
						$(this).toggleClass(this.value);
					}
				});

				$("#btnReset").click(function() {
					$("#selColors").val("");
					$("#selColors").removeClass();

					return false;
				});

				$(".confirm").confirmDialog(function(data) {
					helper.showMsg(data, {
						okHandler : function() {
							location.reload();
						}
					});
				});

				$(".dialog").frameDialog({
					width : 500,
					height : 500,
					close : function() {
						if (art.dialog.data("success")) {
							location.reload();
						}
					}
				});

				$("form").Validform({
					ajaxPost : true,
					tiptype : ValidUtils.siblingTip,
					callback : function(data) {
						helper.showMsg(data, {
							okHandler : function() {
								location.reload();
							}
						});
					}
				});

				$(".showDialog").click(function() {
					var form = $(this).prev(".dialogForm").get(0);
					art.dialog({
						content : form
					});

					return false;
				});
			});
		</script>
	</tiles:putAttribute>
	<tiles:putAttribute name="mainBody">
		<div class="page-header">
			<h1>
				课程类别管理 <small>此处可以对课程进行分类</small>
			</h1>
		</div>
		<div class="row-fluid">
			<div class="span6">
				<ul>
					<s:iterator value="courseTypes" var="courseType">
						<s:url namespace="/coursetype" action="modifyCourseType" id="modifyCourseType">
							<s:param name="id" value="id"></s:param>
						</s:url>
						<s:url namespace="/coursetype" action="selectCourse" id="selectCourse">
							<s:param name="courseTypeId" value="id"></s:param>
						</s:url>
						<li class="courseType ${courseType.cssClass}"><a href="${modifyCourseType}" class="dialog">${courseType.name}</a>
							<form action="doCreateCourse" class="form-inline dialogForm">
								<input type="hidden" name="courseTypeId" value="${courseType.id}" /> <input type="text" name="name" />
								<button type="submit" class="btn btn-primary">创建课程</button>
							</form> <a class="dialog" href="${selectCourse}" title="下属课程选择">
								<i class="icon-plus"></i>
							</a>
							<ul>
								<s:iterator value="courses" var="course">
									<li>${course.name}</li>
								</s:iterator>
							</ul></li>
					</s:iterator>
				</ul>
			</div>
			<div class="span6">
				<form class="form-horizontal" action="doCreateCourseType" method="post">
					<fieldset>
						<legend>创建课程类型</legend>
					</fieldset>
					<div class="control-group">
						<div class="control-group">
							<div class="control-label">类型名称</div>
							<div class="controls">
								<input type="text" name="name" />
							</div>
						</div>
						<div class="control-group">
							<div class="control-label">类型说明</div>
							<div class="controls">
								<input type="text" name="title" />
							</div>
						</div>
						<div class="control-group">
							<div class="control-label">颜色标记</div>
							<div class="controls">
								<select name="cssClass" id="selColors">
									<option value="" class="">不标色</option>
									<s:iterator value="colors" var="color">
										<option value="${color}" class="${color}">${color}</option>
									</s:iterator>
								</select>
								<button title="无颜色" id="btnReset">
									<i class="icon-repeat"></i>
								</button>
							</div>
						</div>
						<div class="controls">
							<button class="btn btn-primary">创建课程类型</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</tiles:putAttribute>
</tiles:insertDefinition>